<template>
	<view>
		<swiper class="syswiper" :indicator-dots="true" :autoplay="true" :interval="1000" :duration="500"
			:circular="true">
			<swiper-item>
				<view class="swiper-item">
			<image src="http://ra0drh5ys.hn-bkt.clouddn.com/1.jpg" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
			<image src="http://ra0drh5ys.hn-bkt.clouddn.com/2.jpg" mode=""></image>
				</view>
			</swiper-item>		<swiper-item>
				<view class="swiper-item">
			<image src="http://ra0drh5ys.hn-bkt.clouddn.com/3.jpg" mode=""></image>
				</view>
			</swiper-item>		<swiper-item>
				<view class="swiper-item">
			<image src="http://ra0drh5ys.hn-bkt.clouddn.com/4.jpg" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="system">
			<view v-for="(item,index) in sysitem" :key="index" @click="tzfn(item.url)">
				<view :class="item.class"></view>
				<text>{{item.text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs
	} from 'vue'
	export default {
		setup() {
			let data = reactive({
				sysitem: [{
						class: 't-icon t-icon-anquanjianchajihuaguanli',
						text: '日常检查',
						url: '/pages/check/richangjiancha'
					},
					{
						class: 't-icon t-icon-shoufei',
						text: '收费管理',
						url: '/pages/check/shoufei'
					},
					{
						class: 't-icon t-icon-shebeizhuanyi',
						text: '计量设备更换',
						url: '/pages/check/jiliang'
					},
					{
						class: 't-icon t-icon-shuidianchaobiao',
						text: '抄表记录查询',
						url: '/pages/check/jilu'
					},
				],
				tzfn: (ev) => {
					uni.navigateTo({
						url: ev
					})
				}
			})
			return {
				...toRefs(data)
			};
		}
	}
</script>

<style lang="scss">
	@import url("~@/static/xyfont/iconfont/iconfont.css");

	.syswiper {
		width: 750rpx;
		height: 420rpx;
	}
	.swiper-item image{
	width: 750rpx;
	height: 420rpx;
	}
	.system {
		display: flex;
		flex-wrap: wrap;
		&>view {
			width: 375rpx;
			color: #666666;
			height:300rpx;
			display: flex;
			box-sizing: border-box;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border:1rpx solid skyblue;
		}
	}
</style>
